<script setup>
import { computed, onBeforeMount, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useLoginStore } from '@/stores/login'
import { loginFromServer, getPhoneCodeFromServer } from '@/api/login'
import { ElMessage } from 'element-plus';
import { loginSuccess } from '@/utils/login';
const registerForm = ref({ email: '', password: '', enterPassword: '', 
prefixPhone:'',phone: '', code :''})
const passwordForm = ref({
  username: '', password: '',phone:'',code:''
})
const phoneForm = ref({
  phone: '', code: ''
})
//登录方式：0为注册,1为账号密码登录,2为手机号登录
const loginStatus= ref(1)
const loginStore = useLoginStore()
const router=useRouter()
const submit=async ()=>{
  // loginStore.setAutoLogin(autoLogin.value)
  let res = await loginFromServer(passwordForm.value.username, passwordForm.value.password, passwordForm.value.phone, passwordForm.value.code)
  if(res.data.code===1){
    loginSuccess(res)
  }
}
const route = useRoute()
const name = ref('')
onBeforeMount(()=>{
  //如果没有从主页跳转到登录，则获取最近的一次类型
  if(!route.query.name){
    name.value = loginStore.type
  }
  else name.value = route.query.name
  loginStore.setType(name.value)
  if(name.value === 'sztu'){
    import('/src/assets/image/sztupp.jfif').then(res => {
      nameData.value.sztu.background = res.default
    })
  }
  else if(name.value === 'lp'){
    import('/src/assets/image/lianpingxian.jfif').then(res => {
      nameData.value.lp.background = res.default
    })
  }
  else if(name.value === 'lh'){
    import('/src/assets/image/lpbg.png').then(res => {
      nameData.value.lh.background = res.default
    })
  }
  else{
    router.push('/pre')
  }
  
})
const nameData =ref( {
  'sztu':{
    title: '深圳技术大学',
    background: ''
  },
  'lp':{
    title: '深圳技术大学与连平县',
    background: ''
  },
  'lh':{
    title: '深圳技术大学与陆河县',
    background: ''
  }
})
const authLogin = ()=>{
  window.location.href = 'https://auth.sztu.edu.cn/idp/oauth2/authorize?client_id=sbxd&state=state&response_type=code&redirect_uri=http://sbxd.sztu.edu.cn/login/auth'
}
const getCode = async ()=>{
  if (passwordForm.value.phone.length!==11){
    ElMessage.error('请输入正确的手机号')
    return
  }
  let res = await getPhoneCodeFromServer(passwordForm.value.phone,passwordForm.value.username)
  if(res.data.code!==1){
    return
  }
  else ElMessage.success('验证码已发送,请查看您的短信')
  let time = 60
  codeBtn.value = `${time}秒后重新获取`
  const timer = setInterval(()=>{
    time--
    codeBtn.value = `${time}秒后重新获取`
    if(time<=0){
      clearInterval(timer)
      codeBtn.value = '获取验证码'
    }
  },1000)
}
const codeBtn = ref('获取验证码')

const back = ()=>{
  router.push('/pre')
}
</script>
<template>

  <div class="frame">
    <div class="info"
      :style="{ backgroundImage:`linear-gradient(180deg, rgba(1, 39, 146, 0.15) 0%, #012892e6 103%),url('${nameData[name]?.background}')`}">
      {{nameData[name].title}}<br />“双百行动”专用办公系统
      <div class="back" @click="back"> 返回首页</div>
    </div>
    
    <!-- 注册 -->
    <div v-show="loginStatus===0" class="form">
      <h2 class="title">注册账号</h2>
      <el-form :model="registerForm" label-width="auto" style="max-width: 600px">
        <el-form-item>
          <el-input v-model="registerForm.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="registerForm.password" placeholder="6-16位密码，区分大小写" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="registerForm.enterPassword" placeholder="确认密码" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="registerForm.prefixPhone" default-first-option style="margin-right: 5px;width: 78px;">
            <el-option value="+86" />
          </el-select>
          <el-input v-model="registerForm.phone" placeholder="11位手机号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="registerForm.code" placeholder="输入验证码" />
          <el-button plain style="height: 50px;margin-left: 5px;">获取验证码</el-button>
        </el-form-item>
      </el-form>
      <div class="bottom">
        <el-button class="submit">注册</el-button>
        <span class="blue-span" @click="loginStatus=1">使用已有账号</span>
      </div>
    </div>
    <!-- 校外登录 -->
    <div class="form" v-show="loginStatus===1">
      <div class="form-method">
        <h2 class="title">校外账号密码登录</h2>
        <h2 class="title" style="border: none;cursor: pointer;" @click="authLogin()">统一身份认证登录</h2>
        <!-- <h2 class="title" style="border: none;cursor: pointer;" @click="loginStatus=2">手机号码登录</h2> -->
      </div>

      <el-form label-width="auto" style="max-width: 600px" label-position="top">
        <el-form-item label="账号">
          <el-input v-model="passwordForm.username" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="passwordForm.password" type="password" show-password placeholder="密码" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="passwordForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="passwordForm.code" placeholder="输入验证码" @keyup.enter.prevent="submit()" />
          <el-button plain style="height: 4.2rem;margin-left: 0.5rem;" @click="getCode()"
            :disabled="codeBtn !== '获取验证码'">{{
            codeBtn }}</el-button>
        </el-form-item>
        <div class="between-box">
          <!-- <el-checkbox v-model="autoLogin" label="自动登录" size="large" /> -->

          <!-- <span class="blue-span" @click="authLogin()">统一身份认证登录</span> -->
          <!-- <span class="blue-span" @click="loginStatus=0">注册</span> -->
        </div>
        <div class="bottom" style="justify-content: center;">
          <el-button type="primary" class="submit"
            @click="submit()">登录</el-button>
        </div>
      </el-form>
      <!-- 自动登录和忘记密码 -->
    </div>
    <!-- 手机号登录 -->
    <div class=" form" v-show="loginStatus === 2">
      <div class="form-method">
        <h2 class="title" style="border: none;cursor: pointer;" @click="loginStatus = 1">账号密码登录</h2>
        <h2 class="title">手机号码登录</h2>
      </div>

      <el-form label-width="auto" style="max-width: 600px" label-position="top">
        <el-form-item label="手机号">
          <el-input v-model="phoneForm.email" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="phoneForm.code" placeholder="输入验证码" />
          <el-button plain style="height: 5rem;margin-left: 0.5rem;" @click="getCode()" :disabled="codeBtn!=='获取验证码'">{{
            codeBtn }}</el-button>
        </el-form-item>
      </el-form>
      <!-- 自动登录和忘记密码 -->
      <div class="between-box">
        <!-- <el-checkbox v-model="autoLogin" label="自动登录" size="large" />
        <span class="blue-span">忘记密码</span> -->
      </div>
      <div class="bottom" style="justify-content: center;">
        <el-button type="primary" class="submit" @click="submit">登录</el-button>
      </div>
    </div>

    <!-- 帮助|隐私|条款 -->
    <div class="clause">
      帮助 | 隐私 | 条款
    </div>
  </div>

</template>


<style lang="scss" scoped>
.frame{
  /* width: 71.4%; */
  height: 61rem;
  width: 100rem;
  /* background-color: black; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 2.9rem #c2c2c2;
  -moz-box-shadow: 0px 0px 2.9rem #c2c2c2;
  -webkit-box-shadow: 0px 0px 2.9rem #c2c2c2;
}
.info{
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;
  background-position: top;
  background-image: linear-gradient(180deg, rgba(1, 39, 146, 0.15) 0%, #012892e6 103%) ,url('/src/assets/image/lianpingxian.jfif');
  background-size: cover;
    background-repeat: no-repeat;
  color: white;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3.9rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.back{
  position: absolute;
  top: 0;
  left: 0;
  margin: 2rem 0 0 4rem;
  // width: 100%;
  height: 3rem;
  background-color: transparent;
  color: #ebeaea;
  opacity: 0.9;
  font-size: 1.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  cursor: pointer;
  &::before{
    content: '';
    display: block;
    position: absolute;
    left: -1.5rem;
    width: 1.1rem;
    height: 1.1rem;
    border-left: currentColor solid 0.3rem;
    border-bottom: currentColor solid 0.3rem;
    border-bottom-left-radius:0.3rem; 
    transform: rotate(45deg);
  }
  &:hover{
    color: white;
    opacity: 1;
  }
}
.form{
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  padding: 5rem;
}
.form-method{
  display: flex;
  justify-content: space-between;
}
.title{
  margin:0 1rem;
  display: inline-block;
  font-size: 1.8rem;
  border-bottom: #F0A700 solid 0.6rem;
  margin-bottom: 4rem;
}
.bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.submit{
  width: 18rem;
  height: 4.5rem;
  font-size: 1.8rem;
}
.blue-span{
  color: #147def;
  cursor: pointer;
  position: absolute;
  right: 0;
  font-size: 1.4rem;
  &:hover{
    color: #79baff;
  }
}
.between-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 4rem 0;
  position: relative;
}
.clause{
  position: absolute;
  cursor: pointer;
  bottom: 1rem;
  left: 75%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #5F727F;
}
:deep(.el-input__wrapper){
  height: 4.2rem;
  padding: 0 1.1rem;
}
:deep(.el-form-item__content){
  flex-wrap: nowrap !important;
}
:deep(.el-select__wrapper){
  width: 7.8rem;
  height: 5rem;
}
:deep(.el-checkbox.el-checkbox--large){
  height: 4rem;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__label){
  font-size: 1.4rem;
}
:deep(.el-form-item){
  margin-bottom: 1.2rem;
}
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label){
  margin-bottom: 0.5rem;
  line-height: 1.9rem;
}
:global(:root) {
  --el-border-radius-base: 0.6rem;
  --el-font-size-base:1.4rem;
}
@media (max-width: 600px) {
  .frame{
    width: 100%;
    height: 100%;
  }
  .form{
    width: 100%;
    left: 0;
    top: 25%;

  }
  .info{
    display: none;
  }
  .clause{
    left: 50%;
  }
  .form-method{
    justify-content: center;
    gap: 10rem;
  }
}
</style>